<template>
  <div class="tabbar">
    <ul>
      <router-link to="/home" tag="li">
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
      </router-link>
      <router-link to="/category" tag="li">
        <span class="iconfont icon-fenlei"></span>
        <p>好物</p>
      </router-link>
      <router-link to="/cart" tag="li">
        <span class="iconfont icon-gouwuche"></span>
        <p>购物车</p>
      </router-link>
      <router-link to="/user" tag="li">
        <span class="iconfont icon-wode"></span>
        <p>我的</p>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Tabbar'
}
</script>

<style lang="scss" scoped>
  .tabbar {
    height: 44px;
    background-color: indigo;

    ul {
      display: flex;
      text-align: center;

      li {
        flex: 1;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        &.router-link-exact-active,.router-link-active {
          color: gold;
        }

        span {
          font-size: 24px;
        }

        p {
          font-size: 13px;
        }
      }
    }
  }
</style>
